<template>
    <div class="container">
        <div class="header-card" @click="toRouter('/bill')">
            <div class="header-card-user flex-align-center">
                <img src="../assets/avatar.png" class="user-logo">
                <div class="ml-16">
                    <div class="user-title">{{data.userInfo.name}}</div>
                </div>
                
            </div>
            <div class="mt-28 flex-align-center justify-between">
                <div class="flex-align-center jf-title">
                    <img src="../assets/zhanghuyue.png" class="jf-icon"> 可用余额
                </div>
                <div class="add-btn" @click.stop="toRouter('/addAccount')">新增收款</div>
            </div>
            
            <div class="jf-amount">¥{{data.userInfo.jf}}</div>
            <div class="tjr">推荐人：{{data.userInfo.tjr}}</div>
        </div>
        <!-- <div class="flex"> -->
            <van-notice-bar left-icon="volume-o" :scrollable="false" style="margin-top: 10px;flex:1">
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false"
            >
                <van-swipe-item v-for="notice in data.noticeList" :key="notice.id" @click="toRouter('/notice',{id: notice.id})">{{notice.title}}</van-swipe-item>
            </van-swipe>
        </van-notice-bar>
        <!-- 123
        </div> -->
        <van-cell-group :border="false" class="home-list">
            <van-cell clickable title="提现记录" center is-link size="large" title-class="home-list__item"  @click="toRouter('/withdraw')"> </van-cell>
            <van-cell clickable title="我的奖励" center is-link size="large" title-class="home-list__item"  @click="toRouter('/myReward')"> </van-cell>
            <van-cell clickable title="我的收款账户" center is-link size="large" title-class="home-list__item"  @click="toRouter('/myAccount')"> </van-cell>
        </van-cell-group>
        <van-dialog v-model:show="data.showNoticeModel" :title="data.selectNotice.title" show-cancel-button>
            <div style="color: black;" v-html="data.selectNotice.mainText"></div>
        </van-dialog>
        <div class="notice-icon" @click="toRouter('/noticeList')">
            <van-icon name="bullhorn-o" />
        </div>
    </div>
</template>

<script setup>
import { UserInfo, listNotice } from "@/config/api"
import { onBeforeMount, ref } from "vue"
// import router from "@/config/router"
import { useRouter } from 'vue-router'
const router = useRouter()
const data = ref({
    userInfo:{},
    showNoticeModel: false,
    noticeList: [],
    selectNotice: {}
})

onBeforeMount(()=>{
    UserInfo().then(resp=>{
        data.value.userInfo = resp
    })
    listNotice({type:'cn'}).then(res => {
        data.value.noticeList = res.records
    })
})

const showNoticeHandler = (e)=>{
    data.value.selectNotice = e
    data.value.showNoticeModel = true
}

const toRouter = (path, query = {})=>{
    router.push({path, query})
}
</script>

<style lang="less" scoped>
.flex{
    display: flex;
    align-items: center;
}
.ml-16{
    margin-left: 0.21rem;
}
.mt-28{
    margin-top: 0.37rem;
}
/deep/ .van-cell--large{
    padding-top: 0.53rem;
    padding-bottom: 0.53rem;
    // padding-left: 0.4rem;
    .van-cell__title{
        // font-size: 0.43rem;
    }
}
.container{
    min-height: 100vh;
    background: #F0F3F8;
    padding: 0.4rem;
    .header-card{
        // height: 6.25rem;
        background-image: url('../assets/home.png');
        background-size: 100% 100%;
        padding: 0.51rem 0.4rem 0.2rem 0.4rem;
        border-radius: 0.27rem;
        box-sizing: border-box;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .user-logo{
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
        }
        .user-title{
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 0.48rem;
        }
        .user-phone{
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            font-size: 0.35rem;
        }
        .jf-title{
            font-size: 0.33rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #F0F3F8;
        }
        .jf-icon{
            width: 0.39rem;
            height: 0.43rem;
            margin-right: 0.09rem;
        }
        .jf-amount{
            font-size: 0.99rem;
            font-family: DIN-Medium, DIN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 1.2rem;
            // padding-top: 0.11rem;
        }
        .tjr{
            font-size: 0.37rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.5);
            line-height: 0.53rem;
            padding-top: 0.13rem;
        }
        .num{
            font-size: 0.45rem;
            font-family: PingFangSC;
            font-weight: 600;
            color: var(--color-primary);
        }
        .desc{
            font-size: 0.35rem;
            font-family: PingFangSC;
            font-weight: 400;
            color: #101D37;
            // padding-top: 0.35rem;
        }
        .add-btn{
            padding: 0 0.32rem;
            height: 0.85rem;
            background: #FFFFFF;
            border-radius: 0.43rem;
            text-align: center;
            font-size: 0.37rem;
            color: var(--color-primary);
            line-height: 0.85rem;
        }
    }
    .home-list{
        margin-top: 0.30rem;
        border-radius: 0.20rem !important;
        overflow: hidden;
    }
    .home-list__item {
        font-size: 0.43rem !important;
        color: #101d37;
        height: 1.07rem;
        line-height: 1.07rem;
    }

    .home-list__icon {
        width: 0.67rem;
        height: 0.67rem;
    }
}
.notice-swipe {
    height: 40px;
    line-height: 40px;
  }

.notice-icon{
    position: fixed;
    width: 1.23rem;
    height: 1.23rem;
    right: .53rem;
    bottom: .53rem;
    font-size: 0.85rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: rgb(81, 112, 231);
}
</style>